<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <h1 id="hh">{{msg}}</h1>
        <child/>
    </div>
</body>

</html>
<script src='https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js'></script>
<script>

    //1.beforeCreate created beforeMount mounted 只会在组件(实例)初始化的时候执行一次

    //2.可以在哪些钩子发送异步请求?created beforeMount mounted都可以发送异步请求,最合适用的最多的是mounted

    //3.beforeDestroy destroyed可以做什么?一般会卸载定时器 清除持续性的事件监听

    //4.父子组件嵌套的时候,钩子函数执行顺序,以beforeMount作为分界点,执行完成子组件的mounted之后,执行父组件的mounted

    //嵌套组件初始化钩子执行顺序

    //1.父组件的beforeCreate 2.父组件的created 3.父组件的beforeMount 4.子组件的beforeCreate 5.子组件的created 6.子组件的beforeMount 7.子组件的mounted 8.父组件的mounted

    //嵌套组件销毁时,执行顺序
    //1.父组件的beforeDestroy 2.子组件的beforeDestroy 3.子组件的destroyed 4.父组件的destroyed


    Vue.component('child', {
        template: '<div class="child">一个组件</div>', beforeCreate() {
            console.group('child-beforeCreate')
            console.log('h1#hh-innerText', document.getElementById('hh').innerText)
            console.log('vm.el', this.$el)
            console.log('data', this.$data)
            console.groupEnd()
        },
        created() {
            console.group('child-created')
            console.log('h1#hh-innerText', document.getElementById('hh').innerText)
            console.log('vm.el', this.$el)
            console.log('data', this.$data)
            console.groupEnd()
        },
        beforeMount() {
            console.group('child-beforeMount')
            console.log('h1#hh-innerText', document.getElementById('hh').innerText)
            console.log('vm.el', this.$el)
            console.log('data', this.$data)
            console.groupEnd()
        },
        mounted() {
            console.group('child-Mounted')
            console.log('h1#hh-innerText', document.getElementById('hh').innerText)
            console.log('vm.el', this.$el)
            console.log('data', this.$data)
            // this.interval = setInterval(() => { console.log('定时器正在执行') }, 1000)
            console.groupEnd()
        },
        beforeUpdate() {
            console.group('child-beforeUpdate')
            console.log('h1#hh-innerText', document.getElementById('hh').innerText)
            console.log('vm.el', this.$el)
            console.log('data', this.$data)
            console.groupEnd()
        },
        updated() {
            console.group('child-updated')
            console.log('h1#hh-innerText', document.getElementById('hh').innerText)
            console.log('vm.el', this.$el)
            console.log('data', this.$data)
            console.groupEnd()
        },
        beforeDestroy() {
            console.group('child-beforeDestroy')
            clearInterval(this.interval)
            console.groupEnd()
        },
        destroyed() {
            console.group('child-destroyed')
            console.log('h1#hh-innerText', document.getElementById('hh').innerText)
            console.log('vm.el', this.$el)
            console.log('data', this.$data)
            console.groupEnd()
        }

    })

    let vm = new Vue({
        el: "#app",
        data: {
            msg: "小兵张嘎"
        },
        beforeCreate() {
            console.group('beforeCreate')
            console.log('h1#hh-innerText', document.getElementById('hh').innerText)
            console.log('vm.el', this.$el)
            console.log('data', this.$data)
            console.groupEnd()
        },
        created() {
            console.group('created')
            console.log('h1#hh-innerText', document.getElementById('hh').innerText)
            console.log('vm.el', this.$el)
            console.log('data', this.$data)
            console.groupEnd()
        },
        beforeMount() {
            console.group('beforeMount')
            console.log('h1#hh-innerText', document.getElementById('hh').innerText)
            console.log('vm.el', this.$el)
            console.log('data', this.$data)
            console.groupEnd()
        },
        mounted() {
            console.group('Mounted')
            console.log('h1#hh-innerText', document.getElementById('hh').innerText)
            console.log('vm.el', this.$el)
            console.log('data', this.$data)
            // this.interval = setInterval(() => { console.log('定时器正在执行') }, 1000)
            console.groupEnd()
        },
        beforeUpdate() {
            console.group('beforeUpdate')
            console.log('h1#hh-innerText', document.getElementById('hh').innerText)
            console.log('vm.el', this.$el)
            console.log('data', this.$data)
            console.groupEnd()
        },
        updated() {
            console.group('updated')
            console.log('h1#hh-innerText', document.getElementById('hh').innerText)
            console.log('vm.el', this.$el)
            console.log('data', this.$data)
            console.groupEnd()
        },
        beforeDestroy() {
            console.group('beforeDestroy')
            clearInterval(this.interval)
            console.groupEnd()
        },
        destroyed() {
            console.group('destroyed')
            console.log('h1#hh-innerText', document.getElementById('hh').innerText)
            console.log('vm.el', this.$el)
            console.log('data', this.$data)
            console.groupEnd()
        }
    })
</script>